import Taro, { Component } from '@tarojs/taro'
import { View, Form, Input, Button, Text } from '@tarojs/components'
import {observer, inject} from '@tarojs/mobx'
import { IStoreProps } from '../../store/Stores'

import '../login/login.less'
import './set_phone.less'
import {getRuntime,phoneNumPartOf} from "../../utils/common";

@inject("stores")
@observer
class Register_step_one extends Component<IStoreProps> {
  state = {
    phoneNumber: '',
    password: '',
    smsCode: '',
    focus:'phoneNumber', // 判断鼠标聚焦的input框
    isComplete: true, // 是否可以点击下一步
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'修改手机号' })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 获取验证码
  getSmsCode () {
    const {stores: { userStore }} = this.props;
    if(getRuntime().isEmpty(this.state.phoneNumber)){
      getRuntime().showToast('请填写手机号~')
      return
    }
    userStore.getSmsCode({
      form: {
        phoneNumber: this.state.phoneNumber,
        checkDay: 15
      },callback: () => {

      }
    })
  }

  formSubmit () {
    const {stores: { userStore }} = this.props;
    userStore.registerStepOneF({
      form: {
        sourceUserId: 0,
        phoneNumber: "string",
        password: "string",
        smsCode: "string"
      },
      callback: () => {
       // console.log(res)
      }
    })
  }

  // input聚焦
  inputFocus (type: string = 'phoneNumber') {
    this.setState({
      focus: type
    })
  }

  inputPhoneNumberChange (e) {
    this.setState({
      phoneNumber: e.target.value
    }, () => {
      if((this.state.phoneNumber.length>0) && (this.state.smsCode.length>0)){
        this.setState({
          isComplete: false
        })
      }
    })
  }

  inputSmsCodeChange (e) {
    this.setState({
      smsCode: e.target.value
    }, () => {
      if((this.state.phoneNumber.length>0) && (this.state.smsCode.length>0)){
        this.setState({
          isComplete: false
        })
      }
    })
  }

  render () {
    let { focus, isComplete } = this.state
    let { userInfo } = this.props.stores.userStore
    return (
      <View className='login-wrap set-phone'>

         <View className='old'>
           <View className=''>当前手机号</View>
           <View className='list-desc'>{phoneNumPartOf(userInfo.phoneNumber)}</View>
         </View>
         <Form  onSubmit={this.formSubmit}>

           <View className='input-group'>
             <Text className='input-title'>新手机号</Text>
             <Input className='input' type='number' name='phoneNumber' placeholderClass='placeholder-class' placeholder='请输入11位手机号' maxLenght='11'/>
           </View>
           <View className= 'input-group'>
             <Text className='input-title'>验证码</Text>
             <Input className='input' type='text'  name='smsCode' placeholderClass='placeholder-class' placeholder='请输入验证码'
                    onFocus={this.inputFocus.bind(this, 'smsCode')}
                    onChange={this.inputSmsCodeChange.bind(this)}

             />
             <View className='get-code' onClick={this.getSmsCode.bind(this)}>获取验证码</View>
           </View>

           <Button className='btn-submit  btn-submit-on' type='primary'  onClick={this.handelRouter.bind(this, '/pages/login/register_step_two')}>确认更改</Button>
         </Form>
       </View>

    )
  }
}

export default Register_step_one
